<template>
  <BaseDialog
    :visible="visible"
    :title="title"
    width="50%"
    :footer-type="'custom'"
    @close="handleClose"
    @update:visible="$emit('update:visible', $event)"
  >
    <div v-if="selectedLocation">
      <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <p style="margin: 0; margin-right: 10px; width: 80px;">经度:</p>
        <el-input 
          :disabled="!isEditing" 
          v-model="selectedLocation.position.lng"
          style="margin-right: 10px;"
        />
      </div>
      
      <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <p style="margin: 0; margin-right: 10px; width: 80px;">纬度:</p>
        <el-input 
          :disabled="!isEditing" 
          v-model="selectedLocation.position.lat"
          style="margin-right: 10px;"
        />
      </div>
      
      <div style="display: flex; align-items: center; margin-bottom: 10px;">
        <p v-if="!isEditing" style="margin: 0; margin-right: 10px; width: 80px;">流地址:</p>
        <p v-if="!isEditing" style="margin: 0; margin-right: 10px;">{{ selectedLocation.flvUrl }}</p>
      </div>
      
      <div class="video-container">
        <VideoPlayer 
          :video-url="selectedLocation.flvUrl"
          :width="'100%'"
          :height="400"
          :autoplay="true"
          :muted="true"
          :controls="true"
        />
      </div>
    </div>
    
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </BaseDialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseDialog from '@/components/BaseDialog.vue'
import VideoPlayer from '@/components/VideoPlayer.vue'

// Props
interface Props {
  visible: boolean
  title?: string
  selectedLocation?: {
    name: string
    position: {
      lng: number
      lat: number
    }
    flvUrl: string
  } | null
  isEditing?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  title: '设备位置信息',
  isEditing: false
})

// Emits
const emit = defineEmits<{
  'update:visible': [value: boolean]
  'close': []
}>()

// 关闭
const handleClose = () => {
  emit('close')
  emit('update:visible', false)
}
</script>

<style scoped lang="scss">
.video-container {
  width: 100%;
  height: 400px;
  margin-top: 20px;
  border-radius: 8px;
  overflow: hidden;
}
</style>
